import React,{useState} from "react";

// 父子间更复杂
interface Props{
    initialUserName:string;
    editingName:string;
    // 按下按钮后修改显示的值
    onNameUpdated:()=>any;
    // 更新正在修改的值
    onEditingNameUpdated:(newEditingName:string)=>any;
    disabled:boolean;
}
// <> 类型约束
const NameEditComponent:React.FC<Props>=(props)=>{
    const onChange=(e:React.ChangeEvent<HTMLInputElement>)=>{
        props.onEditingNameUpdated(e.target.value)
    }
    const onNameSubmit =()=>{
        props.onNameUpdated()
    }
    return(
        <>
            <label>Updated name:</label>
            {/* 正在修改的值+onChange事件 */}
            <input value={props.editingName} onChange={onChange} />
            {/* 按钮点击事件会更新值 */}
            <button 
            disabled={props.disabled}
            onClick={onNameSubmit}>Change</button>
        </>
    )
}
export default NameEditComponent